span {
  font-size: 8em;
}

#container{
  display: grid;
  /* 三行三列 每行每列的宽高 可以使用百分比*/
  grid-template-columns: 150px 150px 150px;
  /* 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。 */
  /* grid-template-columns: repeat(3,150px); */
  /* 重复某种模式*/
  /* grid-template-columns: repeat(2, 100px 20px 80px); */
  /* auto-fill */
  /* grid-template-columns: repeat(auto-fill, 100px); */
  /* fr 后者是前者的2倍 */
  /* grid-template-columns:150px 1fr 2fr; */
  /* 第一列是150 第三列是第二列的2倍 */
  /* grid-template-columns:150px 1fr 2fr; */
  grid-template-rows: 150px 150px 150px;
  /*列宽不小于100px，不大于1fr。  */
  /* grid-template-columns:1fr 1fr minmax(100px, 1fr); */
  /* auto 表示宽度由浏览器器自己设定 */
  /* grid-template-columns: 100px auto 100px; */
  /* 【每一个网格线的名字】 */
  /* grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; */
  /* grid-template-columns: 70% 30%; */
  /* 行之间的间距 */
  /* grid-row-gap: 20px; */
  /* 列之间的间距 */
  /* grid-column-gap: 20px; */
  /* 行列间距的简写 */
  /* grid-gap: 20px 20px; */
  /* grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; */
  /* 区域名 在项目属性里面用他 */
  /* grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i'; */
  /* 根据列来排序*/
  /* grid-auto-flow: column; */
  /* grid-auto-flow: row dense; */
}

.item {
  font-size: 2em;
  text-align: center;
  line-height: 150px;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  /* grid-area:e; */
  background-color: #4dc7ec;
}